import React, { useEffect, useState } from 'react'
import { Table, Button, Modal } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
const { confirm } = Modal;
export default function Rightlist() {
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    axios.get('http://localhost:8000/roles').then(res => {
      console.log(res)
      setDataSource(res.data)
    })
  }, [])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '权限名称',
      dataIndex: 'roleName',
    },
    {
      title: "操作",
      render: (key) => {
        return <div>
          <Button type="danger" shape="circle" onClick={() => { showConfirm(key) }} icon={<DeleteOutlined />} />
          <Button type="primary" shape="circle" icon={<EditOutlined />} />
        </div>
      }
    }
  ]
  const showConfirm = (item) => {
    let _this = this
    confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        // _this.detaMethod(item)
      },
      onCancel() {
        // console.log('Cancel');
      },
    });
  }
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      />;
    </div>
  )
}
